"use client";

import Navigation from "@/components/Navbar";
import { motion } from "framer-motion";
import type { ReactNode } from "react";

export default function AuthLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen flex flex-col">
      <Navigation />
      <main className="flex-1 relative">
        {/* 背景动画效果 */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <motion.div
            className="absolute -top-1/2 -right-1/2 w-[800px] h-[800px] rounded-full bg-gradient-to-r from-blue-400/30 to-purple-400/30 blur-3xl"
            animate={{
              x: [-200, 0, -200],
              y: [-200, 0, -200],
              scale: [0.8, 1, 0.8],
            }}
            transition={{
              duration: 20,
              repeat: Infinity,
              ease: "linear",
            }}
          />
          <motion.div
            className="absolute -bottom-1/2 -left-1/2 w-[600px] h-[600px] rounded-full bg-gradient-to-r from-cyan-400/30 to-blue-400/30 blur-3xl"
            animate={{
              x: [200, 0, 200],
              y: [200, 0, 200],
              scale: [1, 0.8, 1],
            }}
            transition={{
              duration: 15,
              repeat: Infinity,
              ease: "linear",
            }}
          />
        </div>
        {children}
      </main>
      <footer className="py-6 px-4 bg-white/80 backdrop-blur-sm">
        <div className="container mx-auto text-center text-sm text-gray-600">
          <p>© 2024 IoT产品. 保留所有权利.</p>
        </div>
      </footer>
    </div>
  );
}
